<template>
	<view class="container">
		<view class="panel">
			<view class="u-flex u-flex-items-center panel_header">
				<uni-icons size="20" color="#333333" custom-prefix="iconfont" type="icon-dianmian"></uni-icons>
				<text class="name Medium">{{payInfo.storeName}}</text>
			</view>
			<u-line color="#DDDDDD"></u-line>
			<view class="u-flex u-flex-items-start u-flex-center money_box">
				<view class="rmb">
					<uni-icons size="22" color="#333333" custom-prefix="iconfont" type="icon-jiage"></uni-icons>
				</view>
				<text v-if="payInfo.orderMoney" class="money Medium">{{parseFloat(payInfo.orderMoney).toFixed(2)}}</text>
			</view>
			<view class="u-flex u-flex-items-center support_items">
				<text class="tips_text">付款方式:</text>
				<view class="u-flex u-flex-items-center">
					<view class="u-flex u-flex-middle support">
						<uni-icons size="20" color="#00C800" custom-prefix="iconfont" type="icon-weixinzhifu"></uni-icons>
					</view>
					<view class="u-flex u-flex-middle support">
						<uni-icons size="20" color="#009FE8" custom-prefix="iconfont" type="icon-zhifubao"></uni-icons>
					</view>
					<view class="u-flex u-flex-middle support">
						<image style="width: 20px;height: 20px;" src="/static/images/unionpay.png"></image>
					</view>
				</view>
			</view>
			<view class="qrcode">
				<image class="img" :src="payInfo.orderORcode"></image>
			</view>
			<u-line color="#DDDDDD"></u-line>
			<view class="u-flex u-flex-items-start panel_footer">
				<view style="margin-top: 16rpx;">
					<uni-icons size="20" color="#4179FF" custom-prefix="iconfont" type="icon-jinggao"></uni-icons>
				</view>
				<view class="alert">
					<view class="u-flex">
						<text>付款码有效期截止：</text>
						<text style="color: #F26809;">{{payInfo.orderDeadline}}</text>
					</view>
					<view class="u-flex">
						<text>如订单过期，请关闭页面后，重新发起收款获取付款码</text>
					</view>
				</view>
			</view>
		</view>
		<view class="reload_btn">
			<u-button icon="reload" text="手动刷新付款状态" :hairline="false" color="#5C8CFF" iconColor="#FFFFFF" :customStyle="{width:'384rpx',height:'88rpx',borderRadius:'8rpx'}" @click="updateOrder"></u-button>
		</view>
	</view>
</template>

<script>
	import { generateQRCode, checkOrder } from '@/config/api.js';
	let interval = null;
	export default {
		data() {
			return {
				orderNo: '', //订单号
				payInfo: {
					storeName: "",
					orderMoney: "",
					orderORcode: ""
				}
			};
		},
		onLoad(options) {
			var that = this;
			let orderNo = options.orderNo;
			let status = options.status;
			let payInfo = options.payInfo;
			if (uni.$u.test.isEmpty(orderNo)) {
				return uni.showModal({
					title: '提示',
					content: '订单信息错误',
					showCancel: false,
					confirmText: '返回',
					success: function(res) {
						if (res.confirm) {
							uni.$u.route({
								type: 'navigateBack'
							});
						}
					}
				});
			}
			that.orderNo = orderNo;
			if (status == 'created') {
				that.payInfo = JSON.parse(payInfo);
				clearInterval(interval);
				interval = setInterval(() => {
					that.getPayResult();
				}, 3000);
			} else {
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				generateQRCode(params).then(res => {
					that.payInfo = res.data;
					clearInterval(interval);
					interval = setInterval(() => {
						that.getPayResult();
					}, 3000);
				}).catch(err => {
					console.log('generateQRCode=', err);
				});
			}
		},
		onUnload() {
			clearInterval(interval);
		},
		methods: {
			updateOrder() {
				var that = this;
				uni.showLoading();
				that.getPayResult();
			},
			getPayResult() {
				var that = this;
				let params = {
					token: that.vuex_token,
					orderNo: that.orderNo
				};
				checkOrder(params).then(res => {
					let status = res.data.status;
					if (status == 101) {
						clearInterval(interval);
						uni.$u.route({
							url: '/pages/paymentSuccess/paymentSuccess',
							type: 'redirectTo',
							params: {
								orderNo: that.orderNo
							}
						});
					}
					uni.hideLoading();
				}).catch(err => {
					console.log('checkOrder=', err);
					uni.hideLoading();
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #4179FF;

		.container {
			padding-top: 40rpx;

			.panel {
				background: #FFFFFF;
				border-radius: 12rpx;
				padding: 0 20rpx;
				margin: 0 20rpx;

				.panel_header {
					height: 90rpx;

					.name {
						font-size: 30rpx;
						color: #333333;
						line-height: 34rpx;
						margin-left: 20rpx;
					}
				}

				.panel_footer {
					padding-bottom: 12rpx;

					.alert {
						margin-left: 16rpx;
						margin-top: 20rpx;

						text {
							height: 36rpx;
							font-weight: 400;
							font-size: 26rpx;
							color: #333333;
							line-height: 36rpx;
							margin-bottom: 8rpx;
							white-space: nowrap;
						}
					}
				}

				.money_box {
					padding: 40rpx 0;
					margin-bottom: 20rpx;

					.rmb {
						margin-top: 8rpx;
					}

					.money {
						font-size: 68rpx;
						color: #333333;
						line-height: 72rpx;
						margin-left: 14rpx;
					}
				}

				.support_items {
					width: 360rpx;
					margin: 0 auto 20rpx;

					.tips_text {

						font-size: 26rpx;
						color: #333333;
						line-height: 30rpx;
					}

					.support {
						margin-left: 20rpx;
					}
				}

				.qrcode {
					width: 360rpx;
					height: 360rpx;
					margin: 0 auto 40rpx;

					.img {
						display: block;
						width: 360rpx;
						height: 360rpx;
					}
				}
			}

			.reload_btn {
				margin-top: 60rpx;
			}
		}
	}
</style>